<template>
  <el-dialog v-model="props.dialogFormVisible" width="500" @close="() => {
    $emit('update_dialogFormVisable', false)
  }" :title="props.title">
    <el-form :model="props.EditUser" :rules="rules" ref="UserFormRef">
      <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
        <el-input v-model="EditUser.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
        <el-input v-model="EditUser.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
        <el-input v-model="EditUser.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
        <el-select v-model="EditUser.sex">
          <el-option label="男" value="1" />
          <el-option label="女" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
        <el-input v-model="EditUser.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
        <el-input v-model="EditUser.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
        <el-input v-model="EditUser.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" :label-width="formLabelWidth" prop="role_id">
        <el-select v-model="EditUser.role_id">
          <el-option label="管理员" value="1" />
          <el-option label="普通用户" value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleError()">取消</el-button>
        <el-button type="primary" @click="handlePrimary(props.title, UserFormRef)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import { adduserApi, updateuserApi } from '@/api/common';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { reactive, ref, } from 'vue'
import { prop } from 'vue-class-component';
const props = defineProps({
  dialogFormVisible: {
    required: true
  },
  EditUser: {
    required: true,
    type: Object
  },
  title: {
    required: true,
    type: String
  }
})
const emit = defineEmits(['update_dialogFormVisable'])
const formLabelWidth = ref("120px");
const UserFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  sex: [
    { required: true, message: '请输入性别', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入电话', trigger: 'blur' },
  ],
  role_id: [
    { required: true, message: '请选择角色', trigger: 'blur' }
  ]
})

const handlePrimary = async (title: string, formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (title == '修改用户信息') {
        updateuserApi({
          index: props.EditUser.index,
          userid: props.EditUser.userid,
          username: props.EditUser.username,
          password: props.EditUser.password,
          name: props.EditUser.name,
          sex: props.EditUser.sex,
          age: props.EditUser.age,
          email: props.EditUser.email,
          phone: props.EditUser.phone,
          role_id: props.EditUser.role_id
        }).then(res => {
          if (res.data.code == 200) {
            ElMessage.success('修改成功！')
          } else {
            ElMessage.error('修改失败！')
          }
        }).catch(err => {
          ElMessage.error('服务器错误！')
        })
      }
      if (title == '新增用户信息') {
        adduserApi({
          index: props.EditUser.index,
          userid: props.EditUser.userid,
          username: props.EditUser.username,
          password: props.EditUser.password,
          name: props.EditUser.name,
          sex: props.EditUser.sex,
          age: props.EditUser.age,
          email: props.EditUser.email,
          phone: props.EditUser.phone,
          role_id: props.EditUser.role_id
        }).then(res => {
          if (res.data.code == 200) {
            ElMessage.success('添加成功！')
          } else {
            ElMessage.error('添加失败！')
          }
        }).catch(err => {
          console.log(err)
          ElMessage.error('服务器错误！')
        })
      }
      emit('update_dialogFormVisable', false)
    }
  })
}
const handleError = () => {
  emit('update_dialogFormVisable', false)
}
</script>

<style></style>